<template>
	<view>
		<view class="box">
			<u-text :text="`当前完成进度 ${finishTestsCount}/${TestCount}`" lineHeight="50px" size="20px" color="#fff"
				align="left"></u-text>
		</view>
		<view>
			<u-list>
				<u-list-item v-for="test in testStatuList" >
					<u-cell :title="test.testName" :label="`共 ${test.testTotal} 问`">
						<template #right-icon>
							<!-- 这里使用三元运算符判断是否显示什么 -->
							<u-button :text="test.isExist? '重新测试' :'开始测试' " type="primary" size="small"
								@click="but( test.testId,test.url, test.isExist) " >
							</u-button>						
						</template>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { getMentalTestList,getCompletedMentalTestList } from '../../../api/mentalTest/testList'; 
	export default {
		data() {
			return {
				testStatuList:[],
				finishTestsCount: 0, // 完成了几个测试
				TestCount:0,
				title: '职业规划测试'
			};
		},
		
		async onShow() {
		  this.testStatuList=[]

		  const getMentalTestListRes= await getMentalTestList()
		  const getCompletedMentalTestListRes=await getCompletedMentalTestList()

		  this.finishTestsCount = getCompletedMentalTestListRes.data.length
		  this.TestCount=getMentalTestListRes.rows.length
		  
		  getMentalTestListRes.rows.forEach((item)=>{
			  let statu=getCompletedMentalTestListRes.data.includes(item.id)
			  this.testStatuList.push({
			  	testId:item.id,
			  	isExist:statu,
			  	testTotal:item.testTotal,
			  	testName:item.testName,
			  	url:item.url
			  })  
		  })
		},
		
		methods: {
			but(id, url, isExist) {
				// console.log(url+"?isExist="+isExist);
				uni.navigateTo({
					url:url+"?isExist="+isExist+"&id="+id
				});
			}
		}
	};
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		height: 50px;
		width: 100%;
		background-color: #02a7f0;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.text-area {
		width: 100%;
		height: 100%;
	}
	/deep/ .u-cell__title-text.data-v-913eaa32 {
		font-size: 35rpx !important;
	}
</style>